<template>
  <el-input
    v-model="searchInput"
    clearable
    placeholder="拼音码、项目名称检索:"
    style="width: 260px"
    @input="searchInputChange"
  />
  <div class="mb10 mt10" style="border-bottom: 1px dashed #9c9c9c"/>
  <el-scrollbar height="500px">
    <div>
      <el-text v-for="(item, index) in labTypeList">
        <el-text class="lab-type-div fz17"
        >{{ item.name }}
          <el-text>
            <el-checkbox-group v-model="labClinicCheckList">
              <template v-for="(clinicInfo, index) in item.labVsClinicVoList">
                <el-checkbox
                  v-if="clinicInfo.isShowType"
                  :key="clinicInfo.vsId"
                  :value="clinicInfo.vsId"
                  class="mb5 lab-lab-check"
                >
                  <div class="fz15 lab-lab-check-div">
                    {{ clinicInfo.itemName }}
                  </div>
                  <span class="lab-lab-type-div fz16">
                    {{ parseFloat(clinicInfo.totalPrice).toFixed(2) }}元</span
                  >
                  <div class="mt5" style="color: rgb(24 29 191)">
                    <span
                    >{{ clinicInfo.labTubeName }}【{{ clinicInfo.specimenName }}】</span
                    >
                  </div>
                </el-checkbox>
              </template>
            </el-checkbox-group>
          </el-text>
        </el-text>
      </el-text>
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import {listLabType} from "@/api/base/labType.ts";

const props = defineProps({
  orgId: {
    type: String,
    default: "",
  },
  labType: {
    type: String,
    default: "",
  },
});

// watch(
//   () => props.labType,
//   (_oldValue, _newValue) => {
//     getListLabTypeFun();
//   }
// );
// 检索值
const searchInput = ref<String>("");
// 类型数组
const labTypeList = ref<any>();
// 已选项目数组
const labClinicCheckList = ref<any>([]);
// 待选数组 All
let labClinicList: any = [];
// getListLabTypeFun();

// 项目检索
function searchInputChange() {
  labTypeList.value.forEach((typeList: any) => {
    typeList.labVsClinicVoList.forEach((itemList: any) => {
      const itemName = itemList.itemName;
      const inputCode = itemList.inputCode;
      if (itemList.inputCode && (
        inputCode.toLowerCase().indexOf(searchInput.value.toLowerCase()) > -1 ||
        itemName.indexOf(searchInput.value) > -1
      )) {
        itemList.isShowType = true;
      } else {
        itemList.isShowType = false;
      }
    });
  });
}

/** 清空检索框 */
function emptySearchInput() {
  searchInput.value = "";
}

/** 清空项目列表 */
function emptyLabTypeList() {
  labTypeList.value = [];
}

function getListLabTypeFun() {
  return new Promise((resolve, _reject) => {
    labClinicList = [];
    const param = {
      orgId: props.orgId,
      // parentId: props.labType,
      delFlag: "0",
    };
    listLabType(param).then((res: any) => {
      res.data.forEach((element: any) => {
        element.labVsClinicVoList.forEach((item: any) => {
          item.labType = element.labTypeId
          item.labTypeName = element.name;
          // 设置诊疗项目ID
          item.clinicItemId = item.clinicId;
          item.price = item.totalPrice;
          item.itemType = item.labId;
          item.num = 1;
          // 是否显示项目
          item.isShowType = true;
          labClinicList.push(item);
        });
      });
      labTypeList.value = res.data;
      // 处理响应
      resolve(labClinicList);
    });
  })
}

/** 检查项目选择保存事件 */
function saveLabDialog() {
  let labClinicCheckObjList: any = [];
  emptySearchInput();
  // 循环获取选中id对应的obj数据
  labClinicCheckList.value.forEach((labClinic: any) => {
    let index = labClinicList.findIndex((item: any) => {
      return labClinic === item.vsId;
    });
    if (index > -1) {
      labClinicCheckObjList.push(labClinicList[index]);
    }
  });
  return labClinicCheckObjList;
}

function emptyLabClinicCheckList() {
  labClinicCheckList.value = [];
}

/**
 * 从父页面form中点击后获取数据
 * @param row
 */
function setListByForm(row: any) {
  labTypeList.value.forEach((labType: any) => {
    labType.labVsClinicVoList.forEach((item: any) => {
      row.forEach((clinicCheck: any) => {
        if (clinicCheck.vsId === item.vsId) {
          labClinicCheckList.value.push(clinicCheck.vsId);
        }
      })
    })
  })
}

defineExpose({saveLabDialog, emptyLabClinicCheckList, getListLabTypeFun, setListByForm});
</script>
<script lang="ts">
export default {
  name: "ItemSelectDialog",
};
</script>

<style scoped>
.clinic-div {
  color: #000000;
}

.lab-type-div {
  color: #ff9100;
}

.lab-lab-check {
  width: 255px;
  height: 90px;
  border: 1px dashed #ababab;
  border-radius: 10px;
  padding-left: 5px;
}

.lab-lab-check-div {
  width: 160px;
  word-wrap: break-word;
  white-space: break-spaces;
}

.lab-lab-type-div {
  right: 5px;
  bottom: 22px;
  position: absolute;
  float: right;
}
</style>
